var PurchaseOrderItem = function () {
  var template = /* html */ `
    <div class="purchase-order-item">
      <template v-if="orderList!==null">
      <div class="purchase-order-stat">
        <span>欠数：{{stat.oweCount}}</span>
        <span style="margin-left:20px">拖期单数：{{stat.orderCount}}</span>
      </div>
      <div class="purchase-order-item-table">
        <table ref="orderTable" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th style="min-width:135px">订单编号</th>
              <th style="min-width:120px">工厂型号</th>
              <th style="min-width:120px">客户型号</th>
              <th style="min-width:120px">供应商</th>
              <th style="min-width:120px">物料名称</th>
              <th style="min-width:100px">规格</th>
              <th style="min-width:100px">编号</th>
              <th style="min-width:80px">制单时间</th>
              <th style="min-width:80px">最大复期</th>
              <th style="min-width:80px">采购数量</th>
              <th style="min-width:80px">入库数量</th>
              <th style="min-width:80px">欠数</th>
              <th style="min-width:100px">拖期天数</th>
              <th style="min-width:100px">采购人</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="order in orderList" :key="order.purchaseDetailId" :class="{'odd':order.rowIndex%2!==0}">
              <td>{{order.companyOrderId}}</td>
              <td>{{order.factoryNo}}</td>
              <td>{{order.articleNo}}</td>
              <td>{{order.providerName}}</td>
              <td>{{order.materialName}}</td>
              <td>{{order.model}}</td>
              <td>{{order.color}}</td>
              <td class="is-center">{{moment(order.createTime).format('YYYY-MM-DD')}}</td>
              <td class="is-center">
                <span v-if="order.laterPhase!==null">
                  {{moment(order.laterPhase).format('YYYY-MM-DD')}}
                </span>
              </td>
              <td class="is-center">{{order.purchaseCount}}</td>
              <td class="is-center">{{order.inCount}}</td>
              <td class="is-center is-follow">{{order.oweCount}}</td>
              <td class="is-center" :class="{'is-follow':order.tardiness>0}">{{order.tardiness}}</td>
              <td>{{order.purchasePeople}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      </template>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    props: {
      orders: {
        type: Array,
        required: true
      },
      search: {
        type: Object,
        required: true
      }
    },

    watch: {
      changeData: function (newObj, oldObj) {
        if (newObj.rowIndex === oldObj.rowIndex && newObj.rowIndex >= newObj.orders.length) {
          if (newObj.rowIndex !== 0) {
            this.rowIndex = 0;
            this.boardRunning();
            return;
          }
        }

        this.resetOrderList();
      }
    },

    computed: {
      stat: function () {
        var orders = this.orders;
        var orderCount = 0,
          sumOweCount = 0;

        for (var i = 0; i < orders.length; i++) {
          var order = orders[i];
          if (order.oweCount > 0) {
            sumOweCount++;
          }
          if (order.tardiness > 0) {
            orderCount++;
          }
        }
        return {
          oweCount: sumOweCount,
          orderCount: orderCount
        };
      },
      changeData: function () {
        return {
          rowIndex: this.rowIndex,
          orders: this.orders
        };
      }
    },

    data: function () {
      return {
        orderList: null,
        searchOrderList: [],
        rowIndex: 0
      };
    },

    mounted: function () {
      this.filterOrderList();

      var self = this;
      $(this.$el).resize(function () {
        self.clearTimeoutList();
        if (!self.checkRowMove()) {
          self.rowIndex = 0;
        }
        self.boardRunning();
      });
    },

    methods: {
      filterOrderList: function () {
        this.clearTimeoutList();
        var orders = this.orders;
        var searchOrderList = [];
        var hasTardiness = this.search.hasTardiness;
        if (hasTardiness === '') {
          searchOrderList = orders;
        } else {
          searchOrderList = _.filter(orders, function (order) {
            var tardiness = order.tardiness;
            if (hasTardiness) {
              return tardiness > 0;
            }
            return tardiness <= 0;
          });
        }

        this.searchOrderList = searchOrderList;
        if (this.rowIndex !== 0) {
          this.rowIndex = 0;
        } else {
          this.resetOrderList();
        }
        this.boardRunning();
      },

      boardRunning: function () {
        this.clearTimeoutList();

        this.rowIndexRunning();
      },

      rowIndexRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          if (self.checkRowMove()) {
            var rowIndex = self.rowIndex;
            rowIndex++;
            if (rowIndex >= self.orders.length) {
              rowIndex = 0;
            }
            self.rowIndex = rowIndex;
          } else {
            self.rowIndex = 0;
          }

          self.timeoutList[0] = null;
          self.rowIndexRunning();
        }, 5000);
        this.timeoutList[0] = timeout;
      },

      checkRowMove: function () {
        var orderTable = this.$refs['orderTable'];
        if (orderTable === undefined) {
          return false;
        }

        var totalHeight = $(this.$el).find('.purchase-order-item-table').height();
        var tableHeight = $(orderTable).height();
        return totalHeight < tableHeight;
      },

      resetOrderList: function () {
        var orders = this.searchOrderList;
        var rowIndex = this.rowIndex;
        if (rowIndex === 0) {
          this.orderList = _.clone(orders);
          return;
        }

        var orderList = orders.slice(rowIndex);
        var orderArray = orders.slice(0, rowIndex);
        orderList.pushArray(orderArray);
        this.orderList = orderList;
      }
    },

    template: template
  };
}();
